<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据大屏</title>
		<link rel="stylesheet" href="${rc.contextPath}/statics/css/analyse/style.css">
		<script src="${rc.contextPath}/statics/libs/vue.min.js"></script>
		<script src="${rc.contextPath}/statics/libs/jquery.min.js"></script>
		<style>
			.reds{
				color: #f80000;
			}
			.orgins{
				color: #f18131;
			}
		</style>
	</head>
	<body>
		<header>
			模具实时状态概览
			<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
		</header>
		<div id="content">
			<div class="content_left">
				<div class="report">
					<div class="report1">
						<p>本日报修数</p>
						<small>{{alarm.alarm}}条</small>
					</div>
					<div class="report2">
						<p>本日完成数</p>
						<small>{{alarm.fault}} 条</small>
					</div>
				</div>
                <div class="online">
                	<div class="title"><img src="${rc.contextPath}/statics/img/lsd/icon01.png" /> 模具状态分布概览</div>
                	<div class="online_con" id="container2">

                	</div>
                </div>
                <div class="industry">
					<div class="title"><img src="${rc.contextPath}/statics/img/lsd/icon05.png" /> 模具成本趋势统计</div>
					<div class="industry_con">
						<div id="moldCostDiv"  style="height: 100%"></div>
					</div>

                </div>
			</div>
			<div class="content_center">
				<div class="center_top">
					<div class="total_chose_box">
						<div style="height: 16px;"></div>
						<div style="display: flex">
							<div>
								<span class="chose_tltle">请选择车间：</span>
								<select class="year_chose" v-model="q.workShopId" >
									<option value=""  hidden>--请选择--</option>
									<option  v-for="(item,index)  in workShopList" :value="item.deptId" :key="index">{{item.complexName}}</option>
								</select>
							</div>
							<div>
								<span class="chose_tltle">请选择模具机型：</span>
								<select class="year_chose" v-model="q.modelName">
									<option value=""  hidden>--请选择--</option>
									<option  v-for="(mouItem,mouIndex)  in mouldTyeList" :value="mouItem.id" :key="mouIndex">{{mouItem.modelName}}</option>
								</select>
							</div>
							<button class="chose_enter" onclick="workSearch()">确定</button>
							<button class="chose_enter" onclick="Reset()">重置</button>
						</div>
					</div>
					<!-- <div class="title"><img src="${rc.contextPath}/statics/img/lsd/icon03.png" /> 模具状态概览 </div> -->
					<div class="center_top_con" >
						<div v-for="(firstMoldTypeData, index) in moldStatusDataList" :key="firstMoldTypeData.id" class="item">
							<div class="leve1">
								<div class="leve1-title">
									<div style="display: inline-block;">
										<div style="display: flex;align-items: center;justify-content: center;">
											<!---->
											<div style="transform: rotate(-90deg);font-size: 15px;padding-left: 5px;">{{firstMoldTypeData.availableNum}}</div>
											<div  style="padding-left: 4px;">|</div>
											<!-- -->
											<div style="transform: rotate(-90deg);font-size: 15px;padding-right: 4px;">{{ firstMoldTypeData.totalNum}}</div>
										</div>
										<div>{{ firstMoldTypeData.name }}</div>
									</div>
								</div>
								<div class="leve1-children">
									<div v-for="(secondMoldTypeData, index) in firstMoldTypeData.children" :key="secondMoldTypeData.id" class="leve2">
										<div class="leve1-title">
											<div style="display: inline-block;">
												<div style="display: flex;align-items: center;justify-content: center;">
													<div style="transform: rotate(-90deg);font-size: 15px;padding-left: 8px;">
														<div >{{ secondMoldTypeData.totalNum}}</div>
													</div>
													<div style="padding-left: 5px;">|</div>
													<div style="transform: rotate(-90deg);font-size: 15px;padding-right: 4px;">	{{ secondMoldTypeData.totalNum}}</div>
												</div>
												<div style="display: flex;flex-wrap: wrap;height: 55px;text-overflow: ellipsis;">
													{{ secondMoldTypeData.name }}
												</div>
											</div>

										</div>
										<div class="leve2-children">
											<div v-for="(moldStatusData, index) in secondMoldTypeData.children" :key="moldStatusData.id" class="leve3" :style="renderItem(moldStatusData.moldStatus)" @click="moldStatusUpdateParam.moldId = moldStatusData.id" >
												<div>{{ moldStatusData.moldPageCode }}</div>
												<div>
													<div>
														{{ moldStatusData.moldStatusDesc}}
													</div>
													<div :class="getColor(moldStatusData)">{{ moldStatusData.useNo }}</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="center_bot">
					<table class="panel-table"bordercolor="#0d48e0" border="1">
                        <thead bgcolor="#0e4ae0" align="center" >
                        <tr height="40">
                            <th colspan="7"><img src="${rc.contextPath}/statics/img/lsd/icon04.png" /> 本日模具故障列表</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="aaa" align="center">
                        	<td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td>
                        </tr>
							<tr v-for="ticket in ticketList" class="aaa" style="font-size: 16px;" align="center" >
								<td>{{ ticket.moduleNo }}</td>
								<td>{{ ticket.repairDate }}</td>
								<td>{{ ticket.faultDesc }}</td>
								<td>{{ ticket.orderExecuteUsername }}</td>
								<td>{{ REPAIR_TICKET_STATUS[ticket.status] }}</td>
								<td>{{ ticket.resumeProductionTime }}</td>
								<td>{{ ticket.repairDuration }}</td>
							</tr>
                        </tbody>
                    </table>
				</div>
			</div>
			<!--修改成top数据-->
			<div class="content_right">
				<div>
					<div class="report">
						<div id="moldFaultClassifyTimesDiv"  style="height: 100%"></div>
					</div>
				</div>
				<!--开动率-->
				<div class="news_report">
				<div class="title"><img src="${rc.contextPath}/statics/img/lsd/icon05.png" />缸体产线故障率</div>
				<div class="news_list">
					<div id="operatingRateOne"   style="height: 100%"></div>
				</div>

				</div>
				<!--开动率-->
				<div class="data_box">
					<div class="title"><img src="${rc.contextPath}/statics/img/lsd/icon06.png" /> 缸盖产线故障率</div>
					<div style="height: 331px"  class="data_con" id="operatingRateTWo"  style="height: 100%" ></div>
				</div>
			</div>
		</div>
		<!--遮罩层-->
		<div class="bgPop"></div>
		<!--弹出框-->
		<div class="pop">
		    <div class="pop-top">
		        报警记录
		        <span class="pop-close">Ｘ</span>
		    </div>
		    <div class="pop-content">
		        <table class="panel-table" bordercolor="#deefff" border="1">
                    <thead bgcolor="#971212" align="center" >
                        <tr height="38">
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>

                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
		    </div>
		    <div class="pop-foot">
		        <input type="button" value="确定" class="pop-cancel pop-close">
		    </div>
		</div>
		<script>
		    $(document).ready(function () {
		        $('.pop-close').click(function () {
		            $('.bgPop,.pop').hide();
		        });
		        $('.click_pop').click(function () {
		            $('.bgPop,.pop').show();
		        });
		    })

		</script>
		<!--遮罩层-->
		<div class="bgPop2"></div>
		<!--弹出框-->
		<div class="pop2">
		    <div class="pop-top">
		        历史记录
		        <span class="pop-close">Ｘ</span>
		    </div>
		    <div class="pop-content">
		        <table class="panel-table" bordercolor="#deefff" border="1">
                    <thead bgcolor="#10aaa5" align="center" >
                        <tr height="38">
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>

                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
		    </div>
		    <div class="pop-foot">
		        <input type="button" value="确定" class="pop-cancel pop-close">
		    </div>
		</div>
		<script>
		    $(document).ready(function () {
		        $('.pop-close').click(function () {
		            $('.bgPop2,.pop2').hide();
		        });
		        $('.click_pop2').click(function () {
		            $('.bgPop2,.pop2').show();
		        });
		    })

		</script>
		<!--遮罩层-->
		<div class="bgPop3"></div>
		<!--弹出框-->
		<div class="pop3">
		    <div class="pop-top">
		        组态应用
		        <span class="pop-close">Ｘ</span>
		    </div>
		    <div class="pop-content">
		        组态应用
		    </div>
		    <div class="pop-foot">
		        <input type="button" value="确定" class="pop-cancel pop-close">
		    </div>
		</div>
		<script>
		    $(document).ready(function () {
		        $('.pop-close').click(function () {
		            $('.bgPop3,.pop3').hide();
		        });
		        $('.click_pop3').click(function () {
		            $('.bgPop3,.pop3').show();
		        });
		    })

		</script>
		<script type="text/javascript" src="${rc.contextPath}/js/lsd/index.js"></script>
		<script src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>

<!--		<script type="text/javascript" src="${rc.contextPath}/js/lsd/moldFaultNumData.js"></script>-->
<!--		<script type="text/javascript" src="${rc.contextPath}/js/lsd/moldCostData.js"></script>-->
<!--		<script type="text/javascript" src="${rc.contextPath}/js/lsd/moldOperatingRateOne.js"></script>-->
<!--		<script type="text/javascript" src="${rc.contextPath}/js/lsd/moldOperatingRateTwo.js"></script>-->
<!--		<script type="text/javascript" src="${rc.contextPath}/js/lsd/index.js"></script>-->
	</body>
</html>
